<template>
    <div class="flex-center-y justify-between text-white" :style="state.headStyle">
        <div v-if="state.store.config.plateStyle === 'compact' && state.store.config.menuLock" @click="state.store.menu.collapsed = !state.store.menu.collapsed" class="flex justify-center hover:opacity-80 cursor-pointer" style="width: 50px; min-width: 50px; font-size: 20px">
            <sysIcon :type="!state.store.menu.collapsed ? 'system-shouqi4' : 'system-zhankai4'" />
        </div>
        <logo v-if="state.store.config.plateStyle !== 'compact'" id="headLogin" />
        <div class="w-full" :style="'width:calc(100% - ' + (headLoginVal + headConfigVal) + 'px)'">
            <menu-left v-if="state.store.config.plateStyle === 'topMenu' || state.store.config.plateStyle === 'position'" type="horizontal" class="w-full" />
        </div>
        <div></div>
        <headConfig id="headConfig" />
    </div>
</template>
<script setup>
import logo from './logo.vue'
import headConfig from './headConfig.vue'
import menuLeft from '@/components/antdesign/menus/menuLeft.vue'
const state = reactive({
    headLoginVal: 0,
    headConfigVal: 0,
    //业务代码
    headStyle: undefined,
    store: useStore(),
})

onMounted(() => {
    setTimeout(() => {
        state.headLoginVal = document.getElementById('headLogin') ? document.getElementById('headLogin').offsetWidth : 0
        state.headConfigVal = document.getElementById('headConfig') ? document.getElementById('headConfig').offsetWidth : 0
    }, 200)
})

watch(
    () => [state.store.config.plateStyle, state.store.config.menuTheme, state.store.config.primaryColor, state.store.config.isDark],
    (newVal, oldVal) => {
        if (state.store.config.isDark) {
            state.headStyle = 'color:#fff;background:#1f1f1f;'
        } else {
            if (newVal[0] === 'normal') {
                if (newVal[1] === 'normal') {
                    state.headStyle = 'color:#fff;background:' + state.store.config.primaryColor
                }
                if (newVal[1] === 'dark') {
                    state.headStyle = `color:#fff;background:${state.store.config.isDark ? '#1f1f1f' : '#001529'}`
                }
            }
            if (newVal[0] === 'compact') {
                if (newVal[1] === 'normal') {
                    state.headStyle = `color:#fff;background:${state.store.config.primaryColor}`
                }
                if (newVal[1] === 'dark') {
                    state.headStyle = `color:#fff;background:${state.store.config.isDark ? '#1f1f1f' : '#001529'}`
                }
            }
            if (newVal[0] === 'topMenu') {
                if (newVal[1] === 'normal') {
                    state.headStyle = 'color:#fff;background:' + state.store.config.primaryColor
                }
                if (newVal[1] === 'dark') {
                    state.headStyle = `color:#fff;background:${state.store.config.isDark ? '#1f1f1f' : '#001529'}`
                }
            }
            if (newVal[0] === 'position') {
                if (newVal[1] === 'normal') {
                    state.headStyle = 'color:#fff;background:' + state.store.config.primaryColor
                }
                if (newVal[1] === 'dark') {
                    state.headStyle = `color:#fff;background:${state.store.config.isDark ? '#1f1f1f' : '#001529'}`
                }
            }
        }
    },
    { immediate: true }
)

const { headLoginVal, headConfigVal, tenantsList, tenantsId, tenantsName } = toRefs(state)
</script>
